iT邦幫忙

2022 iThome 鐵人賽

DAY 8
1
Software Development

讓 C# 也可以很 Social - 在 .NET 6 用 C# 串接 LINE Services API 的取經之路系列 第 8

[Day 8] 讓 C# 也可以很 Social - .NET 6 C# 與 Line Services API 開發 - Text、Sticker、Image Message

  • 分享至 

  • xImage
  •  
tags: .NET6 C#, LineBot, Line Messaging API, C#, dotnet core

[Day 8] 讓 C# 也可以很 Social - .NET 6 C# 與 Line Services API 開發 - Text、Sticker、Image Message

前言

Hihi 各位好,今天開始會對 Line Bot 可推送訊息進行詳細的介紹,那今天這篇的內容就是針對以下這三種訊息介紹與實作

  • Text message - 文字訊息
  • Sticker message - 貼圖訊息
  • Image message - 圖片訊息

Text Message 介紹 & 實作 文件連結

Line Bot 可推送的Text Message 是由 text(文字)emoji 組成。

  • text 想必不用多說,而 Emoji 的部分根據文件描述,emoji 可以使用 Line 提供的 emojis,也可以使用 Unicode emojis(也就是手機鍵盤可以直接按出來的emoji)。

  • Line 提供的 emojis : 請參考這個清單「List of available LINE emojis」內的 emojis,只有這些 emojis 可以提供給 Line Bot 傳送。

  • Unicode emojis : 直接將對應的 emoji 放入 Text 內即可。

實作 Text Message

在上一篇建立傳訊機制時已經宣告了 TextMessageDto,現在只要添加 Emoji Property 到這個 Class 中即可。

  • Emoji 文件內容,注意 Line Emoji 使用方式需在 Text 中使用 "$" 符號作為 emoji 位置的標記,並且在下方添加 emoji object 將 Index 設為該 "$" 符號的位置,則訊息傳送到 Line 後有被對應到的 "$" 符號就會被對應的 Line emoji 替換。

  • 在 TextMessageDto.cs 下新增 Class

public class TextMessageEmojiDto
{
    public int Index { get; set; }
    public string ProductId { get; set; }
    public string EmojiId { get; set; }
}
  • 添加新的 Property 至 TextMessageDto
public List<TextMessageEmojiDto>? Emojis { get; set; }

測試

  • 使用廣播功能測試 Text Message 有沒有正確宣告。

  • 測試用 RequestBody

{
  "Messages" : [
    {
      "Type":"text", 
      "Text" : "$ 表情符號文字測試訊息 $ ?", 
      "Emojis" : [
        {
          "Index" : 0,
          "ProductID" :"5ac1bfd5040ab15980c9b435",
          "EmojiId":"003"
        },
        {
          "Index" : 13,
          "ProductID" :"5ac1bfd5040ab15980c9b435",
          "EmojiId":"004"
        }
      ]
    }
  ]
}
  • 結果

Sticker Message 介紹 & 實作 文件連結

Line Bot 能傳送的貼圖訊息也請參考這個「List of available stickers」,只有在裡面的貼圖能夠傳送。

實作 Sticker Message

  • 貼圖訊息非常單純,照著文件的格式就好

  • 在 Dtos/Messages 資料夾下新增 StickerMessageDto.cs

using LineBotMessage.Enum;

namespace LineBotMessage.Dtos
{
    public class StickerMessageDto : BaseMessageDto
    {
        public StickerMessageDto()
        {
            Type = MessageTypeEnum.Sticker;
        }
        public string PackageId { get; set; }
        public string StickerId { get; set; }
    }
}
  • 因為多加了一種訊息類別,所以修改 LineBotService 中的 BroadcastMessageHandler Function
/// <summary>
/// 接收到廣播請求時,在將請求傳至 Line 前多一層處理,依據收到的 messageType 將 messages 轉換成正確的型別,這樣 Json 轉換時才能正確轉換。
/// </summary>
/// <param name="messageType"></param>
/// <param name="requestBody"></param>
public void BroadcastMessageHandler(string messageType, object requestBody)
{
    string strBody = requestBody.ToString();
    dynamic messageRequest = new BroadcastMessageRequestDto<BaseMessageDto>();
    switch (messageType)
    {
        case MessageTypeEnum.Text:
            messageRequest = _jsonProvider.Deserialize<BroadcastMessageRequestDto<TextMessageDto>>(strBody);
            break;

        case MessageTypeEnum.Sticker:
            messageRequest = _jsonProvider.Deserialize<BroadcastMessageRequestDto<StickerMessageDto>>(strBody);
            break;
    }
    BroadcastMessage(messageRequest);

}

測試

  • 使用廣播功能測試 Sticker Message 有沒有正確宣告。
  • 測試用 RequestBody
{
  "Messages" : [
    {
      "Type":"sticker", 
      "PackageId":"789",
      "StickerId":"10855"
    }
  ]
}
  • 結果

Image Message 介紹 & 實作 文件連結

圖片訊息也可說是非常重要的訊息內容了,除了圖片給人的印象遠比文字還深刻以外,圖片能表達出的訊息也能比文字豐富許多,所以在考慮廣告行銷時,將宣傳圖片傳給使用者是比文字更好的選擇。

實作 Image Message

  • Line Bot 傳送圖片訊息時有幾項需要注意的

    1. 不是將圖片檔直接丟給 Line 去傳送,而是傳送圖片在網路上的絕對路徑
    2. 圖片網址必須是 Https 協定(網址長度小於2000)
    3. 圖片檔案必須是 JPEG or PNG
    4. 圖片長寬大小沒有限制,但是檔案大小分別有限制 10MB & 1MB
  • 先在 Dtos/Messages 資料夾下新增 ImageMessageDto.cs

using LineBotMessage.Enum;

namespace LineBotMessage.Dto
{
    public class ImageMessageDto : BaseMessageDto
    {
        public ImageMessageDto()
        {
            Type = MessageTypeEnum.Image;
        }

        public string OriginalContentUrl { get; set; }
        public string PreviewImageUrl { get;set; }
    }
}
  • 在 LineBotService 中的 BroadcastMessageHandler Function 添加對應的 case
case MessageTypeEnum.Image:
    messageRequest = _jsonProvider.Deserialize<BroadcastMessageRequestDto<ImageMessageDto>>(strBody);
    break;

圖片絕對路徑取得方法

圖片訊息需要使用圖片在網路上的絕對路徑,意思就是圖片需要自己來管理,Line 並不處理圖片存放的問題,那這邊針對這個問題提供兩種方法,這兩種方法在後面都會使用到~那目前就先選擇一種使用即可。

  1. 將圖片放到可提供公開的絕對路徑的網站 例如: imgur

  2. 使用 Static Files (推薦一起實作)

    • 在專案中新增一個資料夾 "UploadFiles",並將圖檔放入資料夾中。
    • 在 Program.cs 內新增
    // -------- 新增內容 --------
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(builder.Environment.ContentRootPath, "UploadFiles")),
        RequestPath = "/UploadFiles",
    });
    // -------- 新增內容 --------
    
    app.MapControllers();
    app.Run();
    
    • 此時就透過 Host (ngrok 網址) + "/UploadFiles/" + FileName 去存取圖片

測試

  • 準備兩張圖片,放到 UploadFiles 資料夾中

  • 使用 swagger 測試圖片訊息能否正確傳送

  • 測試用 RequestBody

{
  "Messages" : [
     {
       "Type":"image", 
       "OriginalContentUrl" : "your original content url", 
       "PreviewImageUrl" : "your preview image url"
     }
  ]
}
  • 在電腦版 Line 的畫面中,Preview Image 會一直顯示在聊天室畫面中,但把圖片點開後就是 Original Content 的圖片。

各位可以去看看手機版的 Line 對於 Image Message 是怎麼顯示的~

結語

今天的介紹就到這邊了,下一篇要介紹的訊息會是 Video、Audio、Location 的訊息,各位就敬請期待吧。

腦筋急轉彎

  • 如果發現某張圖片的使用量(reuqests)很高,有沒有什麼方式能夠加速的方式呢?

範例程式碼

如果想要參考今天範例程式碼的部份,下面是 Git Repo 連結,方便大家參考。

Day8_Text、Sticker、Image Message


上一篇
[Day 7] 讓 C# 也可以很 Social - .NET 6 C# 與 Line Services API 開發 - 回覆與廣播訊息
下一篇
[Day 9] 讓 C# 也可以很 Social - .NET 6 C# 與 Line Services API 開發 - Video、Audio、Location Message
系列文
讓 C# 也可以很 Social - 在 .NET 6 用 C# 串接 LINE Services API 的取經之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
applefi87
iT邦新手 5 級 ‧ 2023-02-09 16:52:39

腦筋急轉彎
如果發現某張圖片的使用量(reuqests)很高,有沒有什麼方式能夠加速的方式呢?
1.用webp格式
2.用CLOUDFLARE 把圖片快取在雲端.?
想知道您的解方!~

我要留言

立即登入留言